<script lang="ts" setup>
import { useMemberStore, usePhoneStore } from '@/stores'
import { ref, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { PageSkip } from '@/utils/tools'
import couponItem from './components/couponItem.vue'
import { getByMarketingApi, postCouponPackApi } from '@/services/my'

const phoneStore = usePhoneStore()
const memberStore = useMemberStore()
const popupRef = ref()
const SkipPopupRef = ref()
const SkipPopupImg = ref(
  '',
)
const list = ref([])
/**返回首页 */
const back = () => {
  PageSkip('/pages/index/index', 'reLaunch')
}
const couponPackId = ref<string | null>(null)
onLoad(async (opacity) => {
  console.log('onLoad', opacity)
  couponPackId.value = opacity?.marketingId
  getFindCouponPack()
})

const pageData = ref<any>({
  backgroundImg: '',
})

// 调用小程序的分享，以及监听小程序分享
import useMiniShare from '@/hooks/useMiniShare'
const { isShareFriends, setupOnShareAppMessage, onShareAppMessage } = useMiniShare()

isShareFriends()
onShareAppMessage
/** 获取礼包信息 */
const getFindCouponPack = async () => {
  nextTick(() => {
    if (!memberStore.token) {
      return popupRef.value.open()
    }
  })
  try {
    const res = await getByMarketingApi({
      marketingId: couponPackId.value,
    })
    console.log('获取礼包信息', res)
    pageData.value = {
      ...pageData.value,
      ...res?.data,
    }
    list.value = res?.data?.marCouponList?.map((item: any) => {
      return {
        ...item,
        couponCount: item.couponCount || 0,
      }
    })
    console.log('处理后的list', list.value)
    console.log('优惠券礼包信息', pageData.value)
    const shareParams = {
      path: `/pagesMy/giftPackage/giftPackage?marketingId=${couponPackId.value}`,
      title: pageData.value.shareTitle,
      imageUrl: pageData.value.shareImg,
    }
    setupOnShareAppMessage(shareParams)
  } catch (error) {
    console.log(error)
  }
}
const loading = ref(false)
/**领取优惠券 */
const postCouponPack = async () => {
  loading.value = true
  if (!memberStore.token) {
    return popupRef.value.open()
  }
  try {
    const res = await postCouponPackApi(couponPackId.value)
    if (res.code !== 200) {
      textObj.value.text_one = '领取失败'
      textObj.value.text_two = '请参与其他活动吧'
    }
    SkipPopupRef.value.open()
    console.log('领取优惠券', res)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
    getFindCouponPack()
  }
}
const textObj = ref({
  text_one: '领取成功',
  text_two: '快来吃饭吧',
})

/** 点击弹窗按钮  */
const receive = () => {
  PageSkip('/pages/eat/eat', 'switchTab')
}

// /**滑动到底触发 */
// const onScrolltolower = () => {
//   console.log('滚动到底部了')
// }

const rulePopupRef = ref()
const rules = ref()
/** 触发规则组件 */
const triggerRules = (e: any) => {
  rules.value = e
  rulePopupRef.value.popupOpen()
}

// 公共弹出框
import usePopup from '@/hooks/usePopup'
const { SkipPopupRef: PopupRef, receive: PopupReceive, skipPopupData } = usePopup()
</script>

<template>
  <view class="_imaBgc_box" :style="{ backgroundImage: `url(${pageData.backgroundImg})` }">
    <view
      class="iconfont icon_home"
      :style="{ top: 2 + phoneStore.phoneInfo!.top + 'px' }"
      @tap="back()"
    ></view>
    <view class="_coupon_box">
      <!--    @scrolltolower="onScrolltolower()" -->
      <scroll-view v-if="list?.length > 0" scroll-y :show-scrollbar="false" class="scroll_view">
        <!-- item -->
        <couponItem :list="list" @triggerRules="triggerRules" />
      </scroll-view>
      <view v-else class="noData">
        <img
          class="noData_img"
          src=""
          alt=""
        />
      </view>
      <view class="_top"></view>
      <view class="_bottom"></view>
    </view>

    <button class="_getWelfare" hover-class="view-hover" :loading="loading" @tap="postCouponPack()">
      {{ pageData.buttonName || '一键领取' }}
    </button>
  </view>
  <BjsRulePopup :rules="rules" ref="rulePopupRef" />
  <BjsSkipPopup :img="SkipPopupImg" ref="SkipPopupRef" :textObj="textObj" @receive="receive()" />
  <!-- 公共弹窗 -->
  <BjsSkipPopup :img="skipPopupData.img" ref="PopupRef" @receive="PopupReceive" />
  <BjsPopup ref="popupRef" />
</template>

<style lang="scss" scoped>
.dianzi {
  width: 100%;
  background: #f5ffef;
}
._imaBgc_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: 100vw 100vh;
  background-position: center;
  background-repeat: no-repeat;
  .icon_home {
    position: absolute;
    left: 36rpx;
    top: 14rpx;
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50%;
    color: #000;
    text-align: center;
    background: #fff;
    font-size: 44rpx;
  }
}
._getWelfare {
  position: fixed;
  left: 50%;
  bottom: 94rpx;
  transform: translateX(-50%);
  width: 628rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 112rpx;
  background: #8adf4b;
  font-size: 28rpx;
  color: #fff;
}

._coupon_box {
  margin-top: 26.23vh;
  position: relative;
  width: 694rpx;
  max-height: 690rpx;
  border-radius: 20rpx;
  background: #dbf8c6;
  box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.09);
  padding: 28rpx 20rpx 28rpx;
  .noData {
    position: relative;
    border-radius: 20rpx;
    height: 388rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 3;
    .noData_img {
      width: 384rpx;
      height: 254rpx;
    }
  }

  .scroll_view {
    position: relative;
    width: 100%;
    max-height: 690rpx;
    z-index: 9;
  }

  ._top,
  ._bottom {
    position: absolute;
    background-color: #8adf4b;
    width: 140rpx;
    height: 140rpx;
    z-index: 1;
  }

  ._top {
    border-top-right-radius: 20rpx;
    top: 0px;
    right: 0px;
  }
  ._bottom {
    border-bottom-left-radius: 20rpx;
    bottom: 0px;
    left: 0px;
  }
}
</style>
